<template>
	<view class="datika">
		<view class="" style="height: 3rem;">
			
		</view>
		<view class="info">
				<view class="d1">
					答题卡
				</view>
				<view class="d2">
						<view class=""><text class="t1"></text>未答题</view>
						<view class=""><text class="t2"></text>已答题</view>
				</view>
		</view>
		<view class="cont">
			<view v-for="(item1,index1) in content" :key="index1" >
				<text class="t1" v-if="!item1.myanswer">{{(index1+1)}}</text>
				<text class="t2" v-else>{{(index1+1)}}</text>
			</view>
		</view>
		<view class="buts">
				<button  @tap="sub">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				letter:['A','B','C','D','E','F','G','H']
			}
		},
		props:["content","sub"],
		methods:{
		
			
		}
	}
</script>

<style lang="less" scoped>
	.datika{
		position: fixed;
		width: 100%;
		background-color: white;
		z-index: 3;
		    height: 100vh;
		    bottom: 0;
	}
	.info{
		display: flex;
		padding: 20rpx 40rpx;
		.d1{
			color: #008af8;
			flex: 1;
			font-size: 34rpx;
		}
		.d2{
			display: flex;
			align-items: center;
			>view{
				display: flex;
				align-items: center;
				    align-items: flex-end;
					margin-right: 10rpx;
				text{
					display: inline-block;
					width: 30rpx;
					height: 30rpx;
					line-height: 30rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
				.t1{
					background: #C8C7CC;
				}
				.t2{
					background:#008af8;
				}
			}
			
		}
	}
	.cont{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		>view{
			width: 20%;
			text-align: center;
			padding: 20rpx 0;
			text{
				display: inline-block;
				width: 70rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 50%;
				font-size: 24rpx;
				color: white;
			}
			.t1{
				background: #C8C7CC;
			}
			.t2{
				background:#008af8;
			}
		}
	}
	.buts{
		position: absolute;
		bottom: 40rpx;
		width: 100%;
		display: flex;
		button{
			background-color: #008af8;
			color: white;
			    width: 90%;
		}
	}
</style>

